<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>字体图标例子</title>
	<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>

	<i class="fa fa-camera-retro" aria-hidden="true"></i> fa-camera-retro

	<hr>

	<i class="fa fa-camera-retro fa-lg"></i> fa-lg
	<i class="fa fa-camera-retro fa-2x"></i> fa-2x
	<i class="fa fa-camera-retro fa-3x"></i> fa-3x
	<i class="fa fa-camera-retro fa-4x"></i> fa-4x
	<i class="fa fa-camera-retro fa-5x"></i> fa-5x

	<hr>

	<div class="list-group">
	  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
	  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
	  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
	  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
	</div>

	<hr>

	<ul class="fa-ul">
	  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>List icons</li>
	  <li><i class="fa-li fa fa-check-square" aria-hidden="true"></i>can be used</li>
	  <li><i class="fa-li fa fa-spinner fa-spin" aria-hidden="true"></i>as bullets</li>
	  <li><i class="fa-li fa fa-square" aria-hidden="true"></i>in lists</li>
	</ul>

	<hr>

	<i class="fa fa-spinner fa-spin fa-3x fa-fw margin-bottom"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw margin-bottom"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-refresh fa-spin fa-3x fa-fw margin-bottom"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-cog fa-spin fa-3x fa-fw margin-bottom"></i>
	<span class="sr-only">Loading...</span>

	<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>
	<span class="sr-only">Loading...</span>

	<hr>

	<a class="btn btn-default" href="path/to/settings">
	  <i class="fa fa-cog" title="Settings" aria-hidden="true"></i>
	  <span class="sr-only">Settings</span>
	</a>

	<a class="btn btn-danger" href="path/to/settings">
	  <i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
	  <span class="sr-only">Delete</span>
	</a>

	<a class="btn btn-primary" href="#navigation-main">
	  <i class="fa fa-bars" aria-hidden="true" title="Skip to main navigation"></i>
	  <span class="sr-only">Skip to main navigation</span>
	</a>
	
	<hr>

	<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
	<span class="sr-only">Refreshing...</span>

	<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
	<span class="sr-only">Saving. Hang tight!</span>

</body>
</html>